import { SettingOutlined } from '@ant-design/icons';
import { Checkbox, Popover } from 'antd';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import React, { useEffect, useState } from 'react';
import { useMount } from '@umijs/hooks';


interface ColumnsState {
    checkedList: any[],
    indeterminate: boolean,
    checkAll: boolean
}

export default function TableSetting(props: any) {




    const [visible, setvisible] = useState<boolean>(false)

    const [state, setstate] = useState<ColumnsState>({
        checkedList: [],
        indeterminate: true,
        checkAll: false,
    })

    // useEffect(() => {

    // }, [])

    //第一次进入加载
    useMount(() => {
        const checkedList: any[] = [];
        props.options.map((item: any) => checkedList.push(item.key))
        setstate({
            checkedList: checkedList,
            indeterminate: false,
            checkAll: true
        })
    })


    useEffect(() => {
        // console.log(state.checkedList)
        props.onColumnsChange(state.checkedList)
    }, [state.checkedList])


    //全选的时候
    function onCheckAllChange(e: any) {

        const checkedList: any[] = [];
        props.options.map((item: any) => checkedList.push(item.key))
        setstate({
            checkedList: e.target.checked ? checkedList : [],
            indeterminate: false,
            checkAll: e.target.checked
        })
    };


    function onChange(checkedList: CheckboxValueType[]) {
        setstate({
            checkedList: checkedList,
            indeterminate: !!checkedList.length && checkedList.length < props.options.length,
            checkAll: checkedList.length === props.options.length
        })
    };


    function onReset() {
        const checkedList: any[] = [];
        props.options.map((item: any) => checkedList.push(item.key))
        setstate({
            checkedList: checkedList,
            indeterminate: false,
            checkAll: true
        })
    }

    const title = (
        <div><Checkbox
            indeterminate={state.indeterminate}
            onChange={onCheckAllChange}
            checked={state.checkAll}
        >
            全选
      </Checkbox>
            <a style={{ float: 'right' }} onClick={onReset}>重置</a>
        </div>)


    const content = (
        <Checkbox.Group
            value={state.checkedList}
            onChange={onChange}
        >{
                props.options.map((item: any, index: any) => (
                    <div key={index}>
                        <Checkbox value={item.key} key={index}>{item.title}</Checkbox>
                    </div>
                ))
            }
        </Checkbox.Group>
    )
    return (
        <Popover
            title={title}
            trigger="click"
            content={content}
            placement="bottomRight"
            visible={visible}
            arrowPointAtCenter
            onVisibleChange={(visible: boolean) => setvisible(visible)}
        >
            <Popover content="列设置">
                <SettingOutlined style={{ marginLeft: '16px' }} />
            </Popover>
        </Popover>
    )
}
